<template>
	<view class="content index-cont">
		<view class="form-box">
			<uni-forms ref="form" :modelValue="formData" label-width="120">
				<uni-forms-item label="姓名">
					<uni-easyinput type="text" v-model="formData.username" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="人员类型">
					<uni-data-checkbox v-model="userValue" :localdata="userRange"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item :label="userValue == 0? '工号' : '会员卡号'">
					<uni-easyinput type="text" v-if="userValue == 0" v-model="formData.card_no" placeholder="请输入卡号" />
					<picker mode="selector" v-else :range="memberList" :value="memberIndex" :range-key="'card'"
						@change="memberItemChange($event,memberList)">
						<view class="picker">
							<text>{{memberIndex == "" ? "" : memberList[memberIndex].card}}</text>
						</view>
					</picker>
				</uni-forms-item>
				<button class="btn-login_default" :class="getDataExist" @click="submit">
					确定
				</button>
			</uni-forms>

		

		</view>

	</view>
</template>

<script>
	import {
		getVip
	} from '@/api/api';
	import utils from "@/utils/utils";
	export default {
		data() {
			return {
				userValue: 0,
				userRange: [{
					"value": 1,
					"text": "会员"
				}, {
					"value": 0,
					"text": "员工"
				}],
				formData: {
					username: "",
					card_no: "",
				},
				//用户名和密码是否为空，来判断登录按钮的状态，蓝色，灰色
				dataExistFlag: false,
				memberIndex: 0,
				memberList: [],
				pickerData: {}
			}
		},
		computed: {
			//用户名和密码是否为空，不为空的话，登录的按钮为蓝色。有一个为空，登录的按钮为灰色
			getDataExist: function() {
				return this.dataExistFlag ? " btn-login_noraml" : " ";
			},

		},
		watch: {
			'formData.username': function(val) {
				if (utils.trim(val) !== "" && utils.trim(this.formData.card_no) !== "") {
					this.dataExistFlag = true;
				} else {
					this.dataExistFlag = false;
				}
			},
			'formData.card_no': function(val) {
				if (utils.trim(this.formData.username) !== "" && utils.trim(val) !== "") {
					this.dataExistFlag = true;
				} else {
					this.dataExistFlag = false;
				}
			},
			userValue() {
				this.formData.card_no = "";
				this.pickerData = {};
				this.memberIndex = 0;

			}
		},
		onLoad() {
			this.getVipData();
		},
		onShow() {
			//隐藏返回首页按钮，左上角home图标
			uni.hideHomeButton();
			this.userValue = 0;

			this.formData.username = "";

			this.formData.card_no = "";

			this.dataExistFlag = false;
			this.memberIndex = 0;
			this.pickerData = {};
			
		},
		methods: {
			// 触发提交表单
			submit() {
				if (this.dataExistFlag) {
					let path = this.userValue == 0 ? "/pages/staff/staff?type=" + this.userValue + "&cardno=" +
						this.formData.card_no + "&name=" + this.formData.username : "/pages/member/member?type=" + this
						.userValue + "&cardno=" + this
						.formData.card_no + "&name=" + this.formData.username;
					path = decodeURIComponent(path);
					uni.navigateTo({
						url: path,
					});
				}

			},
			getVipData() {
				getVip("").then(res => {
					console.log("getVipData--", res)
					if (res.msg == "success") {
						this.memberList = res.data || [];
					}

				})
			},
			memberItemChange(e, storage) {
				this.memberIndex = e.target.value
				this.pickerData = storage[this.memberIndex] // 这里就是选中的对象
				this.formData.card_no = this.pickerData.card;
			}


		}
	}
</script>

<style scoped lang="scss">
	.index-cont {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.form-box {
		margin-top: 20upx;
		padding-left: 80upx;
		padding-right: 80upx;
		max-width: 750upx;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		font-size: 14px;
		color: #333;
	}

	button::after {
		border: none;
	}

	.btn-login_default {
		margin-top: 78rpx;
		color: #ffffff;
		background-color: #cccccc;
		width: 590rpx;
		height: 90rpx;
		font-size: 16px;
		line-height: 90rpx;
		border-radius: 2.5rem;

		.btn-login_default::after {
			border: none;
		}
	}

	.btn-login_noraml {
		color: #ffffff;
		background-color: #3da8f5;

		.btn-login_noraml::after {
			border: none;
		}
	}


	/* .form-row2 {
		margin: 20upx;

	}


	.member_box,
	.palce_box {
		margin-bottom: 30upx;
	}

	.left-box {
		display: flex;
	}


	.right-box {
		display: flex;
	}

	.member_box .right-box .right-item {
		padding: 20upx;
		border: 1upx solid #ccc;
	}

	.palce_box .right-box .right-item {
		flex: 1;
		width: 50%;
		border: 1upx solid #ccc;
		padding: 20upx;
	}

		.order_box  .left-box{
		display: flex;
	}

	.order-box .right-item {
		border-bottom: 1upx dashed #ccc;
	}



	.activite {
		background: #04c9c3;
		color: #fff;
	}

	.active-place {
		background: #04c9c3;
		color: #fff;
	}

	.place-disabled {
		color: #ccc;
	}

	.icon-plus {
		width: 120upx;
		height: 40upx;
		line-height: 40upx;
		border: 1px solid #F17F42;
		border-radius: 50%;
		text-align: center;
		color: #F17F42;
		margin-left: 20upx;
	} */
</style>
